<template> 
    <div class="app-container">
        <el-card class="operate-container" shadow="never">
            <i class="el-icon-tickets"></i>
            <span>发货列表</span>
        </el-card>
        <div class="table-container">
            <el-table ref="deliverOrderTable"
                      style="width: 100%;"
                      :data="order" border>
                <el-table-column label="订单编号" width="150" align="center">
                    <template slot-scope="scope">{{scope.row.tbOrder.orderId}}</template>
                </el-table-column>
                <el-table-column label="收货人" width="120" align="center">
                    <template slot-scope="scope">{{scope.row.tbOrder.buyerNick}}</template>
                </el-table-column>
                <el-table-column label="手机号码" width="150" align="center">
                    <template slot-scope="scope">{{scope.row.tbOrderShipping.receiverPhone}}</template>
                </el-table-column>
                <el-table-column label="收货地址" width="260" align="center">
                    <template slot-scope="scope">{{scope.row.tbOrderShipping.receiverAddress}}</template>
                </el-table-column>
                <el-table-column label="邮费" width="150" align="center">
                    <template slot-scope="scope">
                        <el-input v-model.number="orderPostfree"
                                  onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="配送方式" width="160" align="center">
                    <template slot-scope="scope">
                        <el-select placeholder="请选择物流公司"
                                   v-model="scope.row.deliveryCompany"
                                   @change="currentSel"
                                   size="small">
                            <el-option v-for="item in companyOptions"
                                       :key="item"
                                       :label="item"
                                       :value="item">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="运单号" width="150" align="center">
                    <template slot-scope="scope">
                        <el-input v-model.number="orderShippingCode"
                                  :disabled="true"
                                  placeholder="系统自动生成"
                        ></el-input>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 15px;text-align: center">
                <el-button @click="cancel">取消</el-button>
                <el-button @click="confirm" type="primary">确定</el-button>
            </div>
        </div>
    </div>
</template>
<script>
    import {getOrderDetail, deliverOrder} from '/src/api/order'

    const defaultLogisticsCompanies = ["顺丰快递", "圆通快递", "中通快递", "韵达快递"];
    export default {
        name: 'deliverOrderList',
        data() {
            return {
                order: [],
                orderPostfree: '',//邮费
                orderShippingCode: '',//运单号
                ordershippingName: '',//物流公司
                companyOptions: defaultLogisticsCompanies//物流公司
            }
        },
        created() {
            getOrderDetail(this.$route.query.orderId).then(res => {
                this.order.push(res.data.result);
            })
        },
        methods: {
            cancel() {
                this.$router.back();
            },
            currentSel(selVal) {
                this.ordershippingName = selVal;
            },
            confirm() {
                this.$confirm('是否要进行发货操作?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let data = new URLSearchParams();
                    data.append('orderId', this.$route.query.orderId)
                    data.append('postFee', this.orderPostfree)
                    data.append('shippingCode', this.rand(15))
                    data.append('shippingName', this.ordershippingName)
                    deliverOrder(data).then(res => {
                        if (res.data.result == 1) {
                            this.$message.success('发货成功')
                            this.$router.push('/orderList')
                        } else {
                            this.$message.error('发货失败')
                        }
                    })
                }).catch(() => {

                });
            },
            //运单号生成
            rand(m) {
                m = m > 16 ? 16 : m;
                var num = Math.random().toString();
                if (num.substr(num.length - m, 1) === '0') {
                    return rand(m);
                }
                return num.substring(num.length - m);
            }

        }
    }
</script>
<style></style>


